今天要進入文章列表頁，發表文章後要顯示到列表頁裡面，在這邊需要做的是從firebase抓出先前存放在資料庫的文章們。

一開始不外乎就是要叫出db以及會需要用的collection(找資料夾)、getDocs (拿檔案)。

import {db} from "../utils/firebase"
import { collection, getDocs } from "firebase/firestore";

有了它們之後，下一步就是找之前命名為post資料夾裡的東西，將post資料夾中的檔案們map成一個Array，最後要將每一筆資料列印到畫面上。

const querySnapshot = getDocs(collection(db, "post"))
  .then((Snapshot)=>{
      const data = Snapshot.docs.map((doc)=>{
          return doc.data()
      })
  })

這邊是最後的程式碼，其中比較麻煩的是dateRange，其中有兩個timestamp值，要把他們轉換成一般的時間日期花了一點時間，後來才知道他們需要* 1000，不然時間都會回到1970，下次就知道要這樣寫了!!

import "../../src/sassStyles/postList.scss"
import { Link } from "react-router-dom"

import {db} from "../utils/firebase"
import { collection, getDocs } from "firebase/firestore";
import { useEffect, useState } from "react";
function PostList(){
    const [posts, setPosts]=useState([])
    useEffect(()=>{
        const querySnapshot = getDocs(collection(db, "post"))
        .then((Snapshot)=>{
            const data = Snapshot.docs.map((doc)=>{
                return doc.data()
            })
            setPosts(data)
        })
    },[])
    return (
				//略
        <ul className="animatable fadeInUp">
            {posts.map((post)=>{
                return(
                    <li key={post.createdAt}>
                        <Link to="/post">
                            <div className="imgwrap">
                                <img src={post.image} alt=""/>
                            </div>
                            <div className="news_title">{post.title}
                            </div>
                            <div className="news_date">
                                { post.dateRange.map((date)=>{
                                    return <div>
                                        {new Date(date.seconds* 1000).toLocaleDateString("zh-TW")}
                                    </div>
                                    
                                })}
                            </div>
                        </Link>
                        <a className="news_tag" href="">{post.continent}</a>
                    </li>
                )
            })}
        </ul>
    )
}

export default PostList